<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.p043}}
				</view>
				<view class="flex-1">
				</view>
			</view>
			<view class="selectWrap py-3 pl-3 flex align-center" :class="model=='light'?'selectWrapLight':''">
				<!-- <view @click="open1" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p016}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view> -->
				<view @click="open3" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p018}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
				<view @click="open2" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p017}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'"
							mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<view class="orderList A-Medium" style="margin-top: 14rpx;" :class="model=='light'?'orderListLight':''">
			<view v-for="(item,index) in orderList1" :key="item.id" class="orderItem mx-3" style="margin-bottom: 12rpx;"
				:style="item.arbitrageOrderStatus==2?'background: url(/static/images/yiwancheng.png);background-size: 180rpx 180rpx;background-repeat: no-repeat;background-position: 50% 100%;':''">
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.orderNo}}
					</view>
					<view class="">
						{{item.createTime}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{i18n2.t046}}
						</view>
					</view>
					<view class="flex align-center">
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
								:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.buyExchange)+'.png'"
								mode=""></image>
						</view>
						<view class="text1">
							{{item.buyExchange}}
						</view>
						<view class="price1" style="margin-left: 5rpx;">
							${{item.buyExchangePrice}}
						</view>
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t051}}({{item.coinType}})
					</view>
					<view class="">
						{{item.buyAmount}}
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t086}}(USDT)
					</view>
					<view class="">
						{{item.orderAmount}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{i18n2.t049}}
						</view>
					</view>
					<view class="flex align-center">
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
								:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.sellExchange)+'.png'"
								mode=""></image>
						</view>
						<view class="text1">
							{{item.sellExchange}}
						</view>
						<view class="price2" style="margin-left: 5rpx;">
							${{item.sellExchangePrice}}
						</view>
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t088}}({{item.coinType}})
					</view>
					<view class="">
						{{item.sellAmount}}
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t086}}(USDT)
					</view>
					<view class="">
						{{item.sellSoldAmount}}
					</view>
				</view>
				<!-- 订单处理耗时 -->
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{i18n2.t064}}
						</view>
					</view>
					<view class="text1">
						{{item.arbitrageOrderStatus==1?item.ddhs:item.clsj}}
					</view>
				</view>
				<!-- 预计完成时间 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t065}}
					</view>
					<view class="">
						{{item.orderExpectedTime}}
					</view>
				</view>
				<!-- 完成进度 -->
				<view class="flex  align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="text1">
						{{i18n2.t066}}
					</view>
					<view class="flex align-center">
						<view :class="item.ddjd=='100%'?'text1':'price3'">
							{{item.ddjd}}
						</view>
						<view class="f0" style="position: relative;">
							<image @click="changeOrderShow(index)" style="width: 28rpx;height: 28rpx;"
								:src="'/static/images/trade/16_'+model+'.png'" mode=""></image>
							<view v-if="item.show" class="p-2 A-Medium" style="position:absolute;bottom: 28rpx;right: 28rpx;background: #5951BA;
		border-radius: 30rpx 30rpx 0rpx 30rpx;font-size: 24rpx;color: #F7F7F7;min-width: 614rpx;">
								{{item.arbitrageOrderStatus==2?i18n2.t076:i18n2.t067}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{i18n2.t068}}
						</view>
					</view>
					<view class="text2">
						{{item.orderProfitLoss}}USDT
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						<!-- {{i18n.t069}} -->
						{{i18n2.t084}}({{item.buyFeeRate}}%)
					</view>
					<view class="" style="color: #53D290;">
						- {{item.buyFee}}(USDT)
					</view>
				</view>
				<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
								<view class="">
									{{i18n.t070}}(USDT)
								</view>
								<view class="">
									{{item.sellFee}}(-{{item.sellFeeRate}}%)
								</view>
							</view> -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						<!-- {{i18n.t071}} -->
						{{ i18n2.t085 }}({{Math.abs(item.platformFeeRate)}}%)
					</view>
					<view class="" style="color: #53D290;">
						- {{Math.abs(item.platformFee)}}(USDT)
					</view>
				</view>
			</view>
		</view>
		<view class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n.p023}}～
		</view>
		<sjPoup ref="sjPoup" @confirm="confirm2"></sjPoup>
		<bzPoup ref="bzPoup" @confirm="confirm1"></bzPoup>
		<ztPoup :type="8" ref="ztPoup" @confirm="confirm3"></ztPoup>
	</view>
</template>

<script>
	import {
		arbitrageList
	} from '@/core/api/index.js';
	import bzPoup from '@/components/bzPoup.vue';
	import sjPoup from '@/components/sjPoup.vue';
	import ztPoup from '@/components/ztPoup.vue';
	export default {
		components: {
			bzPoup,
			sjPoup,
			ztPoup
		},
		data() {
			return {
				pageNo2: 1,
				pageSize2: 15,
				orderList1: [],
				buySell: '',
				coinType: '',
				startDate: '',
				endDate: '',
				isOpen1: false,
				isOpen2: false,
				isOpen3: false,
				changeOrderTimer: null,
				arbitrageOrderStatus: ''
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onLoad(options) {
			// this.buySell = options.buySell;
			this.getLiquidityCisternList();
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('trade')
			},
			i18n10() {
				return this.$t('newObj')
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onReachBottom() {
			this.pageNo2++;
			this.getLiquidityCisternList();
		},
		methods: {
			changeOrderShow(i) {
				this.orderList1[i].show = !this.orderList1[i].show;
				this.$forceUpdate();
			},
			open1() {
				this.closePopup(1);
				if (this.isOpen1) {
					this.closePopup(4);
				} else {
					this.$refs.bzPoup.open();
				}
				this.isOpen1 = !this.isOpen1;
			},
			open2() {
				this.closePopup(2);
				if (this.isOpen2) {
					this.closePopup(4);
				} else {
					this.$refs.sjPoup.open();
				}
				this.isOpen2 = !this.isOpen2;
			},
			open3() {
				this.closePopup(3);
				if (this.isOpen3) {
					this.closePopup(4);
				} else {
					this.$refs.ztPoup.open();
				}
				this.isOpen3 = !this.isOpen3;
			},
			closePopup(e) {
				if (e != 1) {
					this.$refs.bzPoup.closePopup();
				}
				if (e != 2) {
					this.$refs.sjPoup.closePopup();
				}
				if (e != 3) {
					this.$refs.ztPoup.closePopup();
				}
			},
			confirm1(e) {
				this.coinType = e.value;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			confirm2(e) {
				this.startDate = e.startDate;
				this.endDate = e.endDate;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			confirm3(e) {
				this.arbitrageOrderStatus = e.value;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			getLiquidityCisternList() {
				arbitrageList({
					coinType: '',
					mobileUserId: uni.getStorageSync('mobileUserId'),
					arbitrageOrderStatus: this.arbitrageOrderStatus, //订单状态
					pageNo: this.pageNo2,
					pageSize: this.pageSize2,
					startDate: this.startDate,
					endDate: this.endDate,
				}).then(res => {
					console.log(res.result.records, 'cs');
					let list = res.result.records;
					if (this.pageNo2 == 1) {
						this.orderList1 = list;
					} else {
						if (list.length == 0) {
							this.pageNo--;
						} else {
							this.orderList1.push(...list);
						}
					}
					for (let i = 0; i < this.orderList1.length; i++) {
						this.orderList1[i].show = false;
					}
					this.changeOrderInfo();
				})
			},
			changeOrderInfo() {
				if (this.orderList1.length == 0) {
					return;
				}
				clearInterval(this.changeOrderTimer);
				this.changeOrderTimer = null;
				this.changeOrderTimer = setInterval(res => {
					// console.log('cs-changeOrderInfo2');
					this.changeOrderInfo2();
				}, 1000)
			},
			changeOrderInfo2() {
				for (let i = 0; i < this.orderList1.length; i++) {
					if (this.orderList1[i].arbitrageOrderStatus == 2) {
						this.orderList1[i].clsj = this.getclsj(this.orderList1[i].createTime, this.orderList1[i]
							.orderExpectedTime);
					} else {
						try {
							this.orderList1[i].ddhs = this.calculateTimeDifference(this.orderList1[i].createTime.replace(
								' ',
								'T'));
							this.orderList1[i].ddjd = this.getCurrentTimeProgress(this.orderList1[i].createTime.replace(
								' ',
								'T'), this.orderList1[i].orderExpectedTime.replace(' ', 'T'));
						} catch (e) {
							//TODO handle the exception
						}
					}

				}
				this.$forceUpdate();
			},
			getclsj(a, b) {
				const startTime = new Date(a);
				const endTime = new Date(b);

				// 计算时间差（毫秒）
				const diffMilliseconds = endTime.getTime() - startTime.getTime();

				// 转换为小时、分钟和秒
				const hours = Math.floor(diffMilliseconds / (1000 * 60 * 60));
				const minutes = Math.floor((diffMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((diffMilliseconds % (1000 * 60)) / 1000);
				return String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds)
					.padStart(2, '0')
			},
			// 获取订单进度
			getCurrentTimeProgress(startTimeStr, endTimeStr) {
				const startTime = new Date(startTimeStr);
				const endTime = new Date(endTimeStr);
				const currentTime = new Date();
				// 验证时间的有效性
				if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
					console.error('Invalid date string provided.');
					return;
				}
				if (startTime >= endTime) {
					console.error('Start time must be before end time.');
					return;
				}
				if (currentTime < startTime || currentTime > endTime) {
					console.error('Current time is not within the specified range.');
					return;
				}

				// 计算时间段总长度和当前时间位置
				const totalDuration = endTime - startTime;
				const currentOffset = currentTime - startTime;

				// 计算百分比
				let percentage = (currentOffset / totalDuration) * 100;
				// console.log(percentage,'cs-percentage');
				return percentage.toFixed(2) + '%';



			},
			// 获取订单耗时
			calculateTimeDifference(specificDateStr) {
				// 将特定日期字符串转换为Date对象
				const specificDate = new Date(specificDateStr);
				if (isNaN(specificDate.getTime())) {
					console.error('Invalid date string provided.');
					return;
				}
				// 获取当前时间
				const now = new Date();

				// 计算时间差
				const difference = now - specificDate;

				// 如果时间差小于0，说明当前时间还未达到特定时间
				if (difference < 0) {
					console.log('当前时间早于特定时间。');
					return;
				}
				// 将时间差转换为小时、分钟和秒
				let hours = Math.floor(difference / (1000 * 60 * 60));
				let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
				let seconds = Math.floor((difference % (1000 * 60)) / 1000);
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				return hours + ':' + minutes + ':' + seconds;
			}
		}
	}
</script>

<style scoped lang="scss">
	.selectWrap {
		background: #0E0F11;

		.title {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.titleLight {
			color: #0E0F11;
		}
	}

	.selectWrapLight {
		background: #E6E8EF;
	}

	.orderList {
		.orderItem {
			padding: 24rpx 30rpx;
			background: #16181C;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #1F2128;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.text3 {
				font-size: 24rpx;
				color: #F7F7F7;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #F7F7F7;
				margin-right: 8rpx;
			}

			.icon2 {
				width: 20rpx;
				height: 20rpx;
				background: #7F838D;
				margin-right: 8rpx;
			}

			.label {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #82DA4C;
				font-size: 20rpx;
				color: #82DA4C;
			}

			.label2 {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #E7343F;
				font-size: 20rpx;
				color: #E7343F;
			}

			.price1 {
				font-size: 24rpx;
				color: #E7343F;
			}

			.price2 {
				font-size: 24rpx;
				color: #53D290;
			}

			.price3 {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}

	.orderListLight {
		.orderItem {
			background: #FFFFFF;
			border: 2rpx solid #fff;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				color: #0E0F11;
			}

			.text3 {
				color: #0E0F11;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #0E0F11;
				margin-right: 8rpx;
			}

			.label {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #82DA4C;
				font-size: 20rpx;
				color: #82DA4C;
				background: #fff;
			}
		}
	}
</style>